<!--
 * @Description: 地铁活动
 * @Author: your name
 * @Date: 2024-09-10 09:38:17
 * @version: 
 * @LastEditors: your name
 * @LastEditTime: 2024-09-10 09:41:28
-->
<template>
    <div class="activity">
      <vue3-seamless-scroll :list="list" class="scroll" :hover="true" :step="0.4">
        <div class="item" v-for="(item, index) in list" :key="index">
          <span class="message">{{ item.message }}</span>
          <span class="time">{{ item.time }}</span>
        </div>
      </vue3-seamless-scroll>
    </div>
  </template>
  <script>
  import { defineComponent, ref } from "vue";
  import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
  
  export default defineComponent({
    name: "App",
    components: {
      Vue3SeamlessScroll,
    },
    setup() {
      const data = [];
      for (let i = 0; i < 100; i++) {
        data.push({
          message: "7月31日,全线20座车站封顶",
          time: "2022-05-01",
        });
      }
  
      const list = ref(data);
      return { list };
    },
  });
  </script>
  
  <style>
  .activity{
      color: #fff;
      width: 100%;
      height: 100%;
      overflow: hidden;
      pointer-events: all;
  }
  
  .activity .scroll{
      height: 200px;
      margin: 10px;
      overflow: hidden;
  }
  
  .item{
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding:0 30px;
      padding-right: 60px;
  }
  
  .item>span:first-child{
      color:#5dcad0;
  }
  
  .item>span:last-child{
      color: #667eb8;
      font-weight: bold;
  }
  </style>
  